//显示一个根据性别不同而变化的背景图片，当用户向上滑动页面或点击图片时，自动跳转到 /lesson/building 路径。


<script>
import { mapState } from 'vuex'

export default {
  name: 'student',
  computed: {
    // 动态计算高度
    cssVar() {
      return {
        'height': document.documentElement.clientHeight + 'px'
      }
    },
    // 获取性别
    ...mapState({
      gender: state => state.info.gender
    })
  },
  methods: {
    changePage() {
      this.$router.push({
        path: '/lesson/building'
      })
    }
  }
}
</script>

<template>
  <div v-swipeup="changePage">
    <!--  假设gender 1 为男 2 为女  -->
    <div :class="gender === 1 ? 'lesson-boy' : 'lesson-girl'" :style="cssVar" @click="changePage"></div>
  </div>
</template>

<style scoped>
.lesson-boy{
  background: url("../../assets/images/lesson/boy-1.jpg") no-repeat;
  background-size: 100% 100%;
}
.lesson-girl{
  background: url("../../assets/images/lesson/girl-1.jpg") no-repeat;
  background-size: 100% 100%;
}
</style>
